<template>
<div>
  <a-row justify="center">
    <a-col :xs="22" :xxl="12" :xl="14" :lg="14" :md="18">
      <div class="header">
        <span>做题记录</span>
      </div>
      <div class="content">
        <div v-if="logs.length === 0">你还没有做题记录!</div>
        <div v-else>
          <a-timeline mode="left">
            <a-timeline-item v-for="(item, idx) in logs" :key="idx">
              <template #dot><check-circle-outlined style="color: green" v-show="item.correct"/><close-circle-outlined style="color: red" v-show="!item.correct"/></template>
              <span><a @click="showAns(item.id)">{{ item.year }}年第{{ item.number }}题</a> {{ item.subject }} {{item.tag}} {{ item.time }}</span>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
      <div>
        <a-drawer v-model:visible="showDrawer" title="题目详情" placement="right">
          <div class="show-pad"><ShowProblem :content="content"/></div>
          <div class="show-pad" v-for="(item, index) in answer" :key="index">
            <ShowProblem :content="item"/>
          </div>
        </a-drawer>
      </div>
    </a-col>
  </a-row>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Row, Col, Timeline, Drawer } from 'ant-design-vue'
import { CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
import ShowProblem from '@/components/ShowProblem.vue'
import { getUserLog, getLogQusDetail } from '@/service'
import { checkToken, decodeID, decodeCT, decodeValue } from '@/utils/check'
import { storage } from '@/model'
import { transUrl } from '@/utils/ds'
import { AnsSeq } from '@/utils/constants'

interface Log {
  id: number,
  subject: string,
  tag: string,
  time: string,
  correct: boolean,
  year: string,
  number: string
}

export default defineComponent({
  name: 'SolveLog',
  components: {
    ShowProblem,
    CheckCircleOutlined,
    CloseCircleOutlined,
    ARow: Row,
    ACol: Col,
    ATimeline: Timeline,
    ATimelineItem: Timeline.Item,
    ADrawer: Drawer
  },
  setup () {
    const logs = ref<Log[]>([])
    const showDrawer = ref<boolean>(false)
    const content = ref<string>('')
    const answer = ref<string[]>([])

    const setContent = (result: Map<string, string> | undefined) => {
      if (result !== undefined) {
        const q = result.get('question')
        if (q !== undefined) {
          content.value = transUrl(q)
        } else {
          content.value = '###### 问题走失了'
        }

        const a = result.get('answer')
        if (a !== undefined) {
          const ansList = a.split(AnsSeq)
          for (let i = 0; i < ansList.length; i++) {
            ansList[i] = transUrl(ansList[i])
          }
          answer.value = ansList
        } else {
          answer.value = ['###### 答案走失了']
        }
      }
    }

    const loadQusDetail = (pid: number) => {
      getLogQusDetail(pid)
        .then((response) => {
          if (response.status !== 200) {
            return
          }
          const resp = response.data
          if (resp.code !== 0) {
            return
          }
          const data = resp.data
          const lk = data.lk
          const rt = data.rt
          const ct = data.ct
          const key = decodeID(lk)
          const header = decodeValue(rt, key)
          const result = decodeCT(header, ct, key)

          content.value = ''
          answer.value = []
          setTimeout(() => setContent(result), 500)
          // setContent(result)
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const showAns = (pid: number) => {
      showDrawer.value = true
      // console.log(pid)
      loadQusDetail(pid)
    }

    const loadLogs = () => {
      const token = checkToken()
      if (token === '') {
        return
      }
      const cache = storage.get('SOLVE_LOGS')
      if (cache !== '') {
        logs.value = JSON.parse(cache)
        return
      }
      getUserLog(token)
        .then((response) => {
          if (response.status !== 200) {
            return
          }
          const resp = response.data
          if (resp.code !== 0) {
            return
          }
          const data = resp.data
          data.forEach((e: any) => {
            const records = logs.value
            let sub = '未知科目'
            if (e.subject === 'CS') {
              sub = '数据结构'
            } else if (e.subject === 'CCP') {
              sub = '组成原理'
            } else if (e.subject === 'OS') {
              sub = '操作系统'
            } else if (e.subject === 'NET') {
              sub = '计算机网络'
            }
            const t = e.tag.replace(/#/g, ' ')
            // const time = new Date(e.created)
            // console.log(e.created)
            // const d = time.getFullYear() + '/' + time.getMonth() + '/' + time.getDay() + ' ' +
            //   time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()
            records.push({
              id: e.pid,
              subject: sub,
              tag: t,
              time: e.created,
              correct: e.correct,
              year: e.year,
              number: e.number
            })
          })
          if (logs.value.length > 0) {
            storage.set('SOLVE_LOGS', JSON.stringify(logs.value))
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }

    onMounted(() => {
      loadLogs()
    })
    return {
      logs,
      content,
      answer,
      showDrawer,
      showAns
    }
  }
})
</script>

<style scoped>
.header {
  text-align: center;
  margin-top: 26px;
  background-color: #1abc9c;
  border-radius: 10px;
  padding: 12px 0;
}
.header span {
  font-size: 2em;
  color: white;
  display: inline-block;
}
.content {
  margin-top: 40px;
  padding: 0 15px;
}

.show-pad {
  box-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}

.show-pad:not(:first-child) {
  margin-top: 20px;
}
</style>
